<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 6.3.0">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,700,700italic%7CZCOOL+QingKe+HuangYou:300,300italic,400,400italic,700,700italic%7CNoto+Sans+Simplified+Chinese:300,300italic,400,400italic,700,700italic%7CJetBrains+Mono:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/lib/@fortawesome/fontawesome-free/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">
  <link rel="stylesheet" href="/lib/animate.css/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="/lib/@fancyapps/ui/dist/fancybox/fancybox.css" integrity="sha256-RvRHGSuWAxZpXKV9lLDt2e+rZ+btzn48Wp4ueS3NZKs=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"wyatex.online","root":"/","images":"/images","scheme":"Pisces","darkmode":true,"version":"8.18.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":true,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":true}}</script><script src="/js/config.js"></script>

    <meta name="description" content="下面是B站找回来的资源">
<meta property="og:type" content="article">
<meta property="og:title" content="32个手写JS（知识点总结）">
<meta property="og:url" content="https://wyatex.online/%E5%89%8D%E7%AB%AF/32%E4%B8%AA%E6%89%8B%E5%86%99JS%EF%BC%88%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93%EF%BC%89/index.html">
<meta property="og:site_name" content="Wyatex&#96;s blog">
<meta property="og:description" content="下面是B站找回来的资源">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/804ee51d522746c3b219548d038413c2~tplv-k3u1fbpfcp-zoom-1.image">
<meta property="og:image" content="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b099cf3e06bc4421abac4dc460a13c17~tplv-k3u1fbpfcp-zoom-1.image">
<meta property="article:published_time" content="2020-10-20T13:17:40.000Z">
<meta property="article:modified_time" content="2023-05-05T01:25:46.897Z">
<meta property="article:author" content="Wyatex">
<meta property="article:tag" content="笔记">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/804ee51d522746c3b219548d038413c2~tplv-k3u1fbpfcp-zoom-1.image">


<link rel="canonical" href="https://wyatex.online/%E5%89%8D%E7%AB%AF/32%E4%B8%AA%E6%89%8B%E5%86%99JS%EF%BC%88%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93%EF%BC%89/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://wyatex.online/%E5%89%8D%E7%AB%AF/32%E4%B8%AA%E6%89%8B%E5%86%99JS%EF%BC%88%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93%EF%BC%89/","path":"前端/32个手写JS（知识点总结）/","title":"32个手写JS（知识点总结）"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>32个手写JS（知识点总结） | Wyatex`s blog</title>
  








  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">Wyatex`s blog</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">97</span></a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">26</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">155</span></a></li><li class="menu-item menu-item-编程"><a href="/programming/" rel="section"><i class="fa fa-book fa-fw"></i>编程</a></li><li class="menu-item menu-item-蹲坑读物"><a href="/%E5%B9%B2%E8%B4%A7/%E5%BC%80%E5%8F%91%E4%BA%A4%E6%B5%81%E7%BE%A4%E5%88%86%E4%BA%AB%E8%AE%B0%E5%BD%95/" rel="section"><i class="fa fa-book fa-fw"></i>蹲坑读物</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#32%E4%B8%AA%E6%89%8B%E5%86%99JS%EF%BC%8C%E5%B7%A9%E5%9B%BA%E4%BD%A0%E7%9A%84JS%E5%9F%BA%E7%A1%80%EF%BC%88%E9%9D%A2%E8%AF%95%E9%AB%98%E9%A2%91%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">32个手写JS，巩固你的JS基础（面试高频）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#01-%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96"><span class="nav-number">1.1.</span> <span class="nav-text">01.数组扁平化</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%9A%E4%BD%BF%E7%94%A8flat"><span class="nav-number">1.1.1.</span> <span class="nav-text">方法一：使用flat()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9A%E5%88%A9%E7%94%A8%E6%AD%A3%E5%88%99"><span class="nav-number">1.1.2.</span> <span class="nav-text">方法二：利用正则</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%B8%89%EF%BC%9A%E6%AD%A3%E5%88%99%E6%94%B9%E8%89%AF%E7%89%88%E6%9C%AC"><span class="nav-number">1.1.3.</span> <span class="nav-text">方法三：正则改良版本</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E5%9B%9B%EF%BC%9A%E4%BD%BF%E7%94%A8reduce"><span class="nav-number">1.1.4.</span> <span class="nav-text">方法四：使用reduce</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%BA%94%EF%BC%9A%E5%87%BD%E6%95%B0%E9%80%92%E5%BD%92"><span class="nav-number">1.1.5.</span> <span class="nav-text">方法五：函数递归</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#02-%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="nav-number">1.2.</span> <span class="nav-text">02.数组去重</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%9A%E5%88%A9%E7%94%A8Set"><span class="nav-number">1.2.1.</span> <span class="nav-text">方法一：利用Set</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9A%E4%B8%A4%E5%B1%82for%E5%BE%AA%E7%8E%AF-splice"><span class="nav-number">1.2.2.</span> <span class="nav-text">方法二：两层for循环+splice</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%B8%89%EF%BC%9A%E5%88%A9%E7%94%A8indexOf"><span class="nav-number">1.2.3.</span> <span class="nav-text">方法三：利用indexOf</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E5%9B%9B%EF%BC%9A%E5%88%A9%E7%94%A8include"><span class="nav-number">1.2.4.</span> <span class="nav-text">方法四：利用include</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%BA%94%EF%BC%9A%E5%88%A9%E7%94%A8filter"><span class="nav-number">1.2.5.</span> <span class="nav-text">方法五：利用filter</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E5%85%AD%EF%BC%9A%E5%88%A9%E7%94%A8Map"><span class="nav-number">1.2.6.</span> <span class="nav-text">方法六：利用Map</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#03-%E7%B1%BB%E6%95%B0%E7%BB%84%E8%BD%AC%E5%8C%96%E4%B8%BA%E6%95%B0%E7%BB%84"><span class="nav-number">1.3.</span> <span class="nav-text">03.类数组转化为数组</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%9AArray-from"><span class="nav-number">1.3.1.</span> <span class="nav-text">方法一：Array.from</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9AArray-prototype-slice-call"><span class="nav-number">1.3.2.</span> <span class="nav-text">方法二：Array.prototype.slice.call()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E4%B8%89%EF%BC%9A%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">1.3.3.</span> <span class="nav-text">方法三：扩展运算符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B9%E6%B3%95%E5%9B%9B%EF%BC%9A%E5%88%A9%E7%94%A8concat"><span class="nav-number">1.3.4.</span> <span class="nav-text">方法四：利用concat</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#04-Array-prototype-filter"><span class="nav-number">1.4.</span> <span class="nav-text">04.Array.prototype.filter()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#05-Array-prototype-map"><span class="nav-number">1.5.</span> <span class="nav-text">05.Array.prototype.map()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#06-Array-prototype-forEach"><span class="nav-number">1.6.</span> <span class="nav-text">06.Array.prototype.forEach()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#07-Array-prototype-reduce"><span class="nav-number">1.7.</span> <span class="nav-text">07.Array.prototype.reduce()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#08-Function-prototype-apply"><span class="nav-number">1.8.</span> <span class="nav-text">08.Function.prototype.apply()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#09-Function-prototype-call"><span class="nav-number">1.9.</span> <span class="nav-text">09.Function.prototype.call</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-Function-prototype-bind"><span class="nav-number">1.10.</span> <span class="nav-text">10.Function.prototype.bind</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11-debounce%EF%BC%88%E9%98%B2%E6%8A%96%EF%BC%89"><span class="nav-number">1.11.</span> <span class="nav-text">11.debounce（防抖）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#12-throttle%EF%BC%88%E8%8A%82%E6%B5%81%EF%BC%89"><span class="nav-number">1.12.</span> <span class="nav-text">12.throttle（节流）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#13-%E5%87%BD%E6%95%B0%E7%8F%82%E9%87%8C%E5%8C%96"><span class="nav-number">1.13.</span> <span class="nav-text">13.函数珂里化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#14-%E6%A8%A1%E6%8B%9Fnew%E6%93%8D%E4%BD%9C"><span class="nav-number">1.14.</span> <span class="nav-text">14.模拟new操作</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#15-instanceof"><span class="nav-number">1.15.</span> <span class="nav-text">15.instanceof</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#16-%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF"><span class="nav-number">1.16.</span> <span class="nav-text">16.原型继承</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#17-Object-is"><span class="nav-number">1.17.</span> <span class="nav-text">17.Object.is</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18-Object-assign"><span class="nav-number">1.18.</span> <span class="nav-text">18.Object.assign</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#19-%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.19.</span> <span class="nav-text">19.深拷贝</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20-Promise"><span class="nav-number">1.20.</span> <span class="nav-text">20.Promise</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#21-Promise-all"><span class="nav-number">1.21.</span> <span class="nav-text">21.Promise.all</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#22-Promise-race"><span class="nav-number">1.22.</span> <span class="nav-text">22.Promise.race</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#23-Promise%E5%B9%B6%E8%A1%8C%E9%99%90%E5%88%B6"><span class="nav-number">1.23.</span> <span class="nav-text">23.Promise并行限制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#24-JSONP"><span class="nav-number">1.24.</span> <span class="nav-text">24.JSONP</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#25-AJAX"><span class="nav-number">1.25.</span> <span class="nav-text">25.AJAX</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#26-event%E6%A8%A1%E5%9D%97"><span class="nav-number">1.26.</span> <span class="nav-text">26.event模块</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#27-%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD"><span class="nav-number">1.27.</span> <span class="nav-text">27.图片懒加载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#28-%E6%BB%9A%E5%8A%A8%E5%8A%A0%E8%BD%BD"><span class="nav-number">1.28.</span> <span class="nav-text">28.滚动加载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#29-%E6%B8%B2%E6%9F%93%E5%87%A0%E4%B8%87%E6%9D%A1%E6%95%B0%E6%8D%AE%E4%B8%8D%E5%8D%A1%E4%BD%8F%E9%A1%B5%E9%9D%A2"><span class="nav-number">1.29.</span> <span class="nav-text">29.渲染几万条数据不卡住页面</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#30-%E6%89%93%E5%8D%B0%E5%87%BA%E5%BD%93%E5%89%8D%E7%BD%91%E9%A1%B5%E4%BD%BF%E7%94%A8%E4%BA%86%E5%A4%9A%E5%B0%91%E7%A7%8DHTML%E5%85%83%E7%B4%A0"><span class="nav-number">1.30.</span> <span class="nav-text">30.打印出当前网页使用了多少种HTML元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#31-%E5%B0%86VirtualDom%E8%BD%AC%E5%8C%96%E4%B8%BA%E7%9C%9F%E5%AE%9EDOM%E7%BB%93%E6%9E%84"><span class="nav-number">1.31.</span> <span class="nav-text">31.将VirtualDom转化为真实DOM结构</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#32-%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%A7%A3%E6%9E%90%E9%97%AE%E9%A2%98"><span class="nav-number">1.32.</span> <span class="nav-text">32.字符串解析问题</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Wyatex"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">Wyatex</p>
  <div class="site-description" itemprop="description">这里是我用来做笔记的网站哟~</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">155</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">26</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">97</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/wyatex" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wyatex" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:wyatex@qq.com" title="E-Mail → mailto:wyatex@qq.com" rel="noopener me" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>

        </div>
      </div>
    </div>

    
    <div class="sidebar-inner sidebar-blogroll">
      <div class="links-of-blogroll animated">
        <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
          链接
        </div>
        <ul class="links-of-blogroll-list">
            <li class="links-of-blogroll-item">
              <a href="https://antfu.me/" title="https:&#x2F;&#x2F;antfu.me&#x2F;" rel="noopener" target="_blank">Anthony Fu</a>
            </li>
            <li class="links-of-blogroll-item">
              <a href="https://www.codesky.me/" title="https:&#x2F;&#x2F;www.codesky.me&#x2F;" rel="noopener" target="_blank">CodeSky</a>
            </li>
            <li class="links-of-blogroll-item">
              <a href="https://learn.lianglianglee.com/" title="https:&#x2F;&#x2F;learn.lianglianglee.com&#x2F;" rel="noopener" target="_blank">技术文章摘抄</a>
            </li>
        </ul>
      </div>
    </div>
        <div class="pjax">
        <div class="sidebar-inner sidebar-post-related">
          <div class="animated">
              <div class="links-of-blogroll-title"><i class="fa fa-signs-post fa-fw"></i>
    相关文章
  </div>
  <ul class="popular-posts">
    <li class="popular-posts-item">
      <a class="popular-posts-link" href="/%E5%89%8D%E7%AB%AF/js%E7%AC%94%E8%AE%B0%EF%BC%9APromise/" rel="bookmark">
        <time class="popular-posts-time">2020-11-06</time>
        <br>
      js笔记：Promise
      </a>
    </li>
    <li class="popular-posts-item">
      <a class="popular-posts-link" href="/%E5%89%8D%E7%AB%AF/js%E7%AC%94%E8%AE%B0%EF%BC%9A%E6%89%8B%E5%86%99Promise/" rel="bookmark">
        <time class="popular-posts-time">2021-10-17</time>
        <br>
      js笔记：手写Promise
      </a>
    </li>
  </ul>

          </div>
        </div>
        </div>
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wyatex.online/%E5%89%8D%E7%AB%AF/32%E4%B8%AA%E6%89%8B%E5%86%99JS%EF%BC%88%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93%EF%BC%89/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="Wyatex">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Wyatex`s blog">
      <meta itemprop="description" content="这里是我用来做笔记的网站哟~">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="32个手写JS（知识点总结） | Wyatex`s blog">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          32个手写JS（知识点总结）
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-20 21:17:40" itemprop="dateCreated datePublished" datetime="2020-10-20T21:17:40+08:00">2020-10-20</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-05-05 09:25:46" itemprop="dateModified" datetime="2023-05-05T09:25:46+08:00">2023-05-05</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
    <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><p>下面是B站找回来的资源</p>
<span id="more"></span>

<h1 id="32个手写JS，巩固你的JS基础（面试高频）"><a href="#32个手写JS，巩固你的JS基础（面试高频）" class="headerlink" title="32个手写JS，巩固你的JS基础（面试高频）"></a>32个手写JS，巩固你的JS基础（面试高频）</h1><p>作为前端开发，JS是重中之重，最近结束了面试的高峰期，基本上offer也定下来了就等开奖，趁着这个时间总结下32个手写JS问题，这些都是高频面试题，希望对你能有所帮助。</p>
<p>关于源码都紧遵规范，都可跑通MDN示例</p>
<h2 id="01-数组扁平化"><a href="#01-数组扁平化" class="headerlink" title="01.数组扁平化"></a>01.数组扁平化</h2><p>数组扁平化是指将一个多维数组变为一个一维数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, [<span class="number">2</span>, [<span class="number">3</span>, [<span class="number">4</span>, <span class="number">5</span>]]], <span class="number">6</span>];</span><br><span class="line"><span class="comment">// =&gt; [1, 2, 3, 4, 5, 6]</span></span><br></pre></td></tr></table></figure>

<h3 id="方法一：使用flat"><a href="#方法一：使用flat" class="headerlink" title="方法一：使用flat()"></a>方法一：使用flat()</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> res1 = arr.<span class="title function_">flat</span>(<span class="title class_">Infinity</span>);</span><br></pre></td></tr></table></figure>

<h3 id="方法二：利用正则"><a href="#方法二：利用正则" class="headerlink" title="方法二：利用正则"></a>方法二：利用正则</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> res2 = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr).<span class="title function_">replace</span>(<span class="regexp">/\[|\]/g</span>, <span class="string">&#x27;&#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>);</span><br></pre></td></tr></table></figure>

<p>但数据类型都会变为字符串</p>
<h3 id="方法三：正则改良版本"><a href="#方法三：正则改良版本" class="headerlink" title="方法三：正则改良版本"></a>方法三：正则改良版本</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> res3 = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="string">&#x27;[&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr).<span class="title function_">replace</span>(<span class="regexp">/\[|\]/g</span>, <span class="string">&#x27;&#x27;</span>) + <span class="string">&#x27;]&#x27;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="方法四：使用reduce"><a href="#方法四：使用reduce" class="headerlink" title="方法四：使用reduce"></a>方法四：使用reduce</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">flatten</span> = arr =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> pre.<span class="title function_">concat</span>(<span class="title class_">Array</span>.<span class="title function_">isArray</span>(cur) ? <span class="title function_">flatten</span>(cur) : cur);</span><br><span class="line">  &#125;, [])</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> res4 = <span class="title function_">flatten</span>(arr);</span><br></pre></td></tr></table></figure>

<h3 id="方法五：函数递归"><a href="#方法五：函数递归" class="headerlink" title="方法五：函数递归"></a>方法五：函数递归</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> res5 = [];</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">fn</span> = arr =&gt; &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(arr[i])) &#123;</span><br><span class="line">      <span class="title function_">fn</span>(arr[i]);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      res5.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>(arr);</span><br></pre></td></tr></table></figure>

<h2 id="02-数组去重"><a href="#02-数组去重" class="headerlink" title="02.数组去重"></a>02.数组去重</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">1</span>, <span class="string">&#x27;1&#x27;</span>, <span class="number">17</span>, <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">false</span>, <span class="literal">false</span>, <span class="string">&#x27;true&#x27;</span>, <span class="string">&#x27;a&#x27;</span>, &#123;&#125;, &#123;&#125;];</span><br><span class="line"><span class="comment">// =&gt; [1, &#x27;1&#x27;, 17, true, false, &#x27;true&#x27;, &#x27;a&#x27;, &#123;&#125;, &#123;&#125;]</span></span><br></pre></td></tr></table></figure>

<h3 id="方法一：利用Set"><a href="#方法一：利用Set" class="headerlink" title="方法一：利用Set"></a>方法一：利用Set</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> res1 = <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="keyword">new</span> <span class="title class_">Set</span>(arr));</span><br></pre></td></tr></table></figure>

<h3 id="方法二：两层for循环-splice"><a href="#方法二：两层for循环-splice" class="headerlink" title="方法二：两层for循环+splice"></a>方法二：两层for循环+splice</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">unique1</span> = arr =&gt; &#123;</span><br><span class="line">  <span class="keyword">let</span> len = arr.<span class="property">length</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> j = i + <span class="number">1</span>; j &lt; len; j++) &#123;</span><br><span class="line">      <span class="keyword">if</span> (arr[i] === arr[j]) &#123;</span><br><span class="line">        arr.<span class="title function_">splice</span>(j, <span class="number">1</span>);</span><br><span class="line">        <span class="comment">// 每删除一个树，j--保证j的值经过自加后不变。同时，len--，减少循环次数提升性能</span></span><br><span class="line">        len--;</span><br><span class="line">        j--;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="方法三：利用indexOf"><a href="#方法三：利用indexOf" class="headerlink" title="方法三：利用indexOf"></a>方法三：利用indexOf</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">unique2</span> = arr =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> res = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (res.<span class="title function_">indexOf</span>(arr[i]) === -<span class="number">1</span>) res.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>当然也可以用include、filter，思路大同小异。</p>
<h3 id="方法四：利用include"><a href="#方法四：利用include" class="headerlink" title="方法四：利用include"></a>方法四：利用include</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">unique3</span> = arr =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> res = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!res.<span class="title function_">includes</span>(arr[i])) res.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="方法五：利用filter"><a href="#方法五：利用filter" class="headerlink" title="方法五：利用filter"></a>方法五：利用filter</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">unique4</span> = arr =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> arr.<span class="title function_">filter</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">indexOf</span>(item) === index;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="方法六：利用Map"><a href="#方法六：利用Map" class="headerlink" title="方法六：利用Map"></a>方法六：利用Map</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">unique5</span> = arr =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line">  <span class="keyword">const</span> res = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!map.<span class="title function_">has</span>(arr[i])) &#123;</span><br><span class="line">      map.<span class="title function_">set</span>(arr[i], <span class="literal">true</span>)</span><br><span class="line">      res.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="03-类数组转化为数组"><a href="#03-类数组转化为数组" class="headerlink" title="03.类数组转化为数组"></a>03.类数组转化为数组</h2><p>类数组是具有<strong>length</strong>属性，但不具有数组原型上的方法。常见的类数组有<strong>arguments</strong>、DOM操作方法返回的结果。</p>
<h3 id="方法一：Array-from"><a href="#方法一：Array-from" class="headerlink" title="方法一：Array.from"></a>方法一：Array.from</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>))</span><br></pre></td></tr></table></figure>

<h3 id="方法二：Array-prototype-slice-call"><a href="#方法二：Array-prototype-slice-call" class="headerlink" title="方法二：Array.prototype.slice.call()"></a>方法二：Array.prototype.slice.call()</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>))</span><br></pre></td></tr></table></figure>

<h3 id="方法三：扩展运算符"><a href="#方法三：扩展运算符" class="headerlink" title="方法三：扩展运算符"></a>方法三：扩展运算符</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[...<span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>)]</span><br></pre></td></tr></table></figure>

<h3 id="方法四：利用concat"><a href="#方法四：利用concat" class="headerlink" title="方法四：利用concat"></a>方法四：利用concat</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">concat</span>.<span class="title function_">apply</span>([], <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>));</span><br></pre></td></tr></table></figure>

<h2 id="04-Array-prototype-filter"><a href="#04-Array-prototype-filter" class="headerlink" title="04.Array.prototype.filter()"></a>04.Array.prototype.filter()</h2><p><img data-src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/804ee51d522746c3b219548d038413c2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">filter</span> = <span class="keyword">function</span>(<span class="params">callback, thisArg</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="variable language_">this</span> == <span class="literal">undefined</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;this is null or not undefined&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> callback !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(callback + <span class="string">&#x27;is not a function&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> res = [];</span><br><span class="line">  <span class="comment">// 让O成为回调函数的对象传递（强制转换对象）</span></span><br><span class="line">  <span class="keyword">const</span> O = <span class="title class_">Object</span>(<span class="variable language_">this</span>);</span><br><span class="line">  <span class="comment">// &gt;&gt;&gt;0 保证len为number，且为正整数</span></span><br><span class="line">  <span class="keyword">const</span> len = O.<span class="property">length</span> &gt;&gt;&gt; <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="comment">// 检查i是否在O的属性（会检查原型链）</span></span><br><span class="line">    <span class="keyword">if</span> (i <span class="keyword">in</span> O) &#123;</span><br><span class="line">      <span class="comment">// 回调函数调用传参</span></span><br><span class="line">      <span class="keyword">if</span> (callback.<span class="title function_">call</span>(thisArg, O[i], i, O)) &#123;</span><br><span class="line">        res.<span class="title function_">push</span>(O[i]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="05-Array-prototype-map"><a href="#05-Array-prototype-map" class="headerlink" title="05.Array.prototype.map()"></a>05.Array.prototype.map()</h2><p><img data-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b099cf3e06bc4421abac4dc460a13c17~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">map</span> = <span class="keyword">function</span>(<span class="params">callback, thisArg</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="variable language_">this</span> == <span class="literal">undefined</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;this is null or not defined&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> callback !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(callback + <span class="string">&#x27; is not a function&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> res = [];</span><br><span class="line">  <span class="comment">// 同理</span></span><br><span class="line">  <span class="keyword">const</span> O = <span class="title class_">Object</span>(<span class="variable language_">this</span>);</span><br><span class="line">  <span class="keyword">const</span> len = O.<span class="property">length</span> &gt;&gt;&gt; <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (i <span class="keyword">in</span> O) &#123;</span><br><span class="line">      <span class="comment">// 调用回调函数并传入新数组</span></span><br><span class="line">      res[i] = callback.<span class="title function_">call</span>(thisArg, O[i], i, <span class="variable language_">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="06-Array-prototype-forEach"><a href="#06-Array-prototype-forEach" class="headerlink" title="06.Array.prototype.forEach()"></a>06.Array.prototype.forEach()</h2><p><code>forEach</code>跟map类似，唯一不同的是<code>forEach</code>是没有返回值的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">forEach</span> = <span class="keyword">function</span>(<span class="params">callback, thisArg</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="variable language_">this</span> == <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;this is null or not defined&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> callback !== <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(callback + <span class="string">&#x27; is not a function&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> O = <span class="title class_">Object</span>(<span class="variable language_">this</span>);</span><br><span class="line">  <span class="keyword">const</span> len = O.<span class="property">length</span> &gt;&gt;&gt; <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">let</span> k = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">while</span> (k &lt; len) &#123;</span><br><span class="line">    <span class="keyword">if</span> (k <span class="keyword">in</span> O) &#123;</span><br><span class="line">      callback.<span class="title function_">call</span>(thisArg, O[k], k, O);</span><br><span class="line">    &#125;</span><br><span class="line">    k++;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="07-Array-prototype-reduce"><a href="#07-Array-prototype-reduce" class="headerlink" title="07.Array.prototype.reduce()"></a>07.Array.prototype.reduce()</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">reduce</span> = <span class="keyword">function</span>(<span class="params">callback, initialValue</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="variable language_">this</span> == <span class="literal">undefined</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;this is null or not defined&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> callback !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(callbackfn + <span class="string">&#x27; is not a function&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> O = <span class="title class_">Object</span>(<span class="variable language_">this</span>);</span><br><span class="line">  <span class="keyword">const</span> len = <span class="variable language_">this</span>.<span class="property">length</span> &gt;&gt;&gt; <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">let</span> accumulator = initialValue;</span><br><span class="line">  <span class="keyword">let</span> k = <span class="number">0</span>;</span><br><span class="line">  <span class="comment">// 如果第二个参数为undefined的情况下</span></span><br><span class="line">  <span class="comment">// 则数组的第一个有效值作为累加器的初始值</span></span><br><span class="line">  <span class="keyword">if</span> (accumulator === <span class="literal">undefined</span>) &#123;</span><br><span class="line">    <span class="keyword">while</span> (k &lt; len &amp;&amp; !(k <span class="keyword">in</span> O)) &#123;</span><br><span class="line">      k++;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 如果超出数组界限还没有找到累加器的初始值，则TypeError</span></span><br><span class="line">    <span class="keyword">if</span> (k &gt;= len) &#123;</span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;Reduce of empty array with no initial value&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    accumulator = O[k++];</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">while</span> (k &lt; len) &#123;</span><br><span class="line">    <span class="keyword">if</span> (k <span class="keyword">in</span> O) &#123;</span><br><span class="line">      accumulator = callback.<span class="title function_">call</span>(<span class="literal">undefined</span>, accumulator, O[k], k, O);</span><br><span class="line">    &#125;</span><br><span class="line">    k++;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> accumulator;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="08-Function-prototype-apply"><a href="#08-Function-prototype-apply" class="headerlink" title="08.Function.prototype.apply()"></a>08.Function.prototype.apply()</h2><p>第一个参数是绑定的this，默认为<code>window</code>，第二个参数是数组或类数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">apply</span> = <span class="keyword">function</span>(<span class="params">context = <span class="variable language_">window</span>, args</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="variable language_">this</span> !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;Type Error&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> fn = <span class="title class_">Symbol</span>(<span class="string">&#x27;fn&#x27;</span>);</span><br><span class="line">  context[fn] = <span class="variable language_">this</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> res = context[fn](...args);</span><br><span class="line">  <span class="keyword">delete</span> context[fn];</span><br><span class="line">  <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="09-Function-prototype-call"><a href="#09-Function-prototype-call" class="headerlink" title="09.Function.prototype.call"></a>09.Function.prototype.call</h2><p>于<code>call</code>唯一不同的是，<code>call()</code>方法接受的是一个参数列表</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">call</span> = <span class="keyword">function</span>(<span class="params">context = <span class="variable language_">window</span>, ...args</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="variable language_">this</span> !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;Type Error&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> fn = <span class="title class_">Symbol</span>(<span class="string">&#x27;fn&#x27;</span>);</span><br><span class="line">  context[fn] = <span class="variable language_">this</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> res = context[fn](...args);</span><br><span class="line">  <span class="keyword">delete</span> context[fn];</span><br><span class="line">  <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="10-Function-prototype-bind"><a href="#10-Function-prototype-bind" class="headerlink" title="10.Function.prototype.bind"></a>10.Function.prototype.bind</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">bind</span> = <span class="keyword">function</span>(<span class="params">context, ...args</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="variable language_">this</span> !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&quot;Type Error&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 保存this的值</span></span><br><span class="line">  <span class="keyword">var</span> self = <span class="variable language_">this</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">function</span> <span class="title function_">F</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 考虑new的情况</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="variable language_">this</span> <span class="keyword">instanceof</span> F) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> <span class="title function_">self</span>(...args, ...<span class="variable language_">arguments</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> self.<span class="title function_">apply</span>(context, [...args, ...<span class="variable language_">arguments</span>])</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="11-debounce（防抖）"><a href="#11-debounce（防抖）" class="headerlink" title="11.debounce（防抖）"></a>11.debounce（防抖）</h2><p>触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">debounce</span> = (<span class="params">fn, time</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">let</span> timeout = <span class="literal">null</span>;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="built_in">clearTimeout</span>(timeout)</span><br><span class="line">    timeout = <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      fn.<span class="title function_">apply</span>(<span class="variable language_">this</span>, <span class="variable language_">arguments</span>);</span><br><span class="line">    &#125;, time);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>防抖常应用于用户进行搜索输入节约请求资源，<code>window</code>触发<code>resize</code>事件时进行防抖只触发一次。</p>
<h2 id="12-throttle（节流）"><a href="#12-throttle（节流）" class="headerlink" title="12.throttle（节流）"></a>12.throttle（节流）</h2><p>高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">throttle</span> = (<span class="params">fn, time</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">let</span> flag = <span class="literal">true</span>;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!flag) <span class="keyword">return</span>;</span><br><span class="line">    flag = <span class="literal">false</span>;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      fn.<span class="title function_">apply</span>(<span class="variable language_">this</span>, <span class="variable language_">arguments</span>);</span><br><span class="line">      flag = <span class="literal">true</span>;</span><br><span class="line">    &#125;, time);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>节流常应用于鼠标不断点击触发、监听滚动事件。</p>
<h2 id="13-函数珂里化"><a href="#13-函数珂里化" class="headerlink" title="13.函数珂里化"></a>13.函数珂里化</h2><blockquote>
<p>  指的是将一个接受多个参数的函数 变为 接受一个参数返回一个函数的固定形式，这样便于再次调用，例如f(1)(2)</p>
</blockquote>
<p>经典面试题：实现<code>add(1)(2)(3)(4)=10;</code> 、 <code>add(1)(1,2,3)(2)=9;</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> _args = [...<span class="variable language_">arguments</span>];</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line">    _args.<span class="title function_">push</span>(...<span class="variable language_">arguments</span>);</span><br><span class="line">    <span class="keyword">return</span> fn;</span><br><span class="line">  &#125;</span><br><span class="line">  fn.<span class="property">toString</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> _args.<span class="title function_">reduce</span>(<span class="function">(<span class="params">sum, cur</span>) =&gt;</span> sum + cur);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> fn;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="14-模拟new操作"><a href="#14-模拟new操作" class="headerlink" title="14.模拟new操作"></a>14.模拟new操作</h2><p>3个步骤：</p>
<ol>
<li>以<code>ctor.prototype</code>为原型创建一个对象。</li>
<li>执行构造函数并将this绑定到新创建的对象上。</li>
<li>判断构造函数执行返回的结果是否是引用数据类型，若是则返回构造函数执行的结果，否则返回创建的对象。</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">newOperator</span>(<span class="params">ctor, ...args</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> ctor !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;Type Error&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> obj = <span class="title class_">Object</span>.<span class="title function_">create</span>(ctor.<span class="property"><span class="keyword">prototype</span></span>);</span><br><span class="line">  <span class="keyword">const</span> res = ctor.<span class="title function_">apply</span>(obj, args);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> isObject = <span class="keyword">typeof</span> res === <span class="string">&#x27;object&#x27;</span> &amp;&amp; res !== <span class="literal">null</span>;</span><br><span class="line">  <span class="keyword">const</span> isFunction = <span class="keyword">typeof</span> res === <span class="string">&#x27;function&#x27;</span>;</span><br><span class="line">  <span class="keyword">return</span> isObject || isFunction ? res : obj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="15-instanceof"><a href="#15-instanceof" class="headerlink" title="15.instanceof"></a>15.instanceof</h2><p><code>instanceof</code>运算符用于检测构造函数的<code>prototype</code>属性是否出现在某个实例对象的原型链上。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">myInstanceof</span> = (<span class="params">left, right</span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// 基本数据类型都返回false</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> left !== <span class="string">&#x27;object&#x27;</span> || left === <span class="literal">null</span>) <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  <span class="keyword">let</span> proto = <span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(left);</span><br><span class="line">  <span class="keyword">while</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (proto === <span class="literal">null</span>) <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">if</span> (proto === right.<span class="property"><span class="keyword">prototype</span></span>) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    proto = <span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(proto);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="16-原型继承"><a href="#16-原型继承" class="headerlink" title="16.原型继承"></a>16.原型继承</h2><p>这里只写寄生组合继承了，中间还有几个演变过来的继承但都有一些缺陷</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Parent</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&#x27;parent&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Child</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title class_">Parent</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>);</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">type</span> = <span class="string">&#x27;children&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Child</span>.<span class="property"><span class="keyword">prototype</span></span> = <span class="title class_">Object</span>.<span class="title function_">create</span>(<span class="title class_">Parent</span>.<span class="property"><span class="keyword">prototype</span></span>);</span><br><span class="line"><span class="title class_">Child</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> = <span class="title class_">Child</span>;</span><br></pre></td></tr></table></figure>

<h2 id="17-Object-is"><a href="#17-Object-is" class="headerlink" title="17.Object.is"></a>17.Object.is</h2><p><code>Object.is</code>解决的主要是这两个问题：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">+<span class="number">0</span> === -<span class="number">0</span>  <span class="comment">// true</span></span><br><span class="line"><span class="title class_">NaN</span> === <span class="title class_">NaN</span> <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">is</span>= (<span class="params">x, y</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (x === y) &#123;</span><br><span class="line">    <span class="comment">// +0和-0应该不相等</span></span><br><span class="line">    <span class="keyword">return</span> x !== <span class="number">0</span> || y !== <span class="number">0</span> || <span class="number">1</span>/x === <span class="number">1</span>/y;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> x !== x &amp;&amp; y !== y;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="18-Object-assign"><a href="#18-Object-assign" class="headerlink" title="18.Object.assign"></a>18.Object.assign</h2><p><code>Object.assign()</code>方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象（请注意这个操作是浅拷贝）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(<span class="title class_">Object</span>, <span class="string">&#x27;assign&#x27;</span>, &#123;</span><br><span class="line">  <span class="attr">value</span>: <span class="keyword">function</span>(<span class="params">target, ...args</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (target == <span class="literal">null</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;Cannot convert undefined or null to object&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 目标对象需要统一是引用数据类型，若不是会自动转换</span></span><br><span class="line">    <span class="keyword">const</span> to = <span class="title class_">Object</span>(target);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; args.<span class="property">length</span>; i++) &#123;</span><br><span class="line">      <span class="comment">// 每一个源对象</span></span><br><span class="line">      <span class="keyword">const</span> nextSource = args[i];</span><br><span class="line">      <span class="keyword">if</span> (nextSource !== <span class="literal">null</span>) &#123;</span><br><span class="line">        <span class="comment">// 使用for...in和hasOwnProperty双重判断，确保只拿到本身的属性、方法（不包含继承的）</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">const</span> nextKey <span class="keyword">in</span> nextSource) &#123;</span><br><span class="line">          <span class="keyword">if</span> (<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">hasOwnProperty</span>.<span class="title function_">call</span>(nextSource, nextKey)) &#123;</span><br><span class="line">            to[nextKey] = nextSource[nextKey];</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> to;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 不可枚举</span></span><br><span class="line">  <span class="attr">enumerable</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">writable</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">configurable</span>: <span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="19-深拷贝"><a href="#19-深拷贝" class="headerlink" title="19.深拷贝"></a>19.深拷贝</h2><p>递归的完整版本（考虑到了Symbol属性）：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">cloneDeep1</span> = (<span class="params">target, hash = <span class="keyword">new</span> <span class="built_in">WeakMap</span>()</span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// 对于传入参数处理</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> target !== <span class="string">&#x27;object&#x27;</span> || target === <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 哈希表中存在直接返回</span></span><br><span class="line">  <span class="keyword">if</span> (hash.<span class="title function_">has</span>(target)) <span class="keyword">return</span> hash.<span class="title function_">get</span>(target);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> cloneTarget = <span class="title class_">Array</span>.<span class="title function_">isArray</span>(target) ? [] : &#123;&#125;;</span><br><span class="line">  hash.<span class="title function_">set</span>(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 针对Symbol属性</span></span><br><span class="line">  <span class="keyword">const</span> symKeys = <span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(target);</span><br><span class="line">  <span class="keyword">if</span> (symKeys.<span class="property">length</span>) &#123;</span><br><span class="line">    symKeys.<span class="title function_">forEach</span>(<span class="function"><span class="params">symKey</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">typeof</span> target[symKey] === <span class="string">&#x27;object&#x27;</span> &amp;&amp; target[symKey] !== <span class="literal">null</span>) &#123;</span><br><span class="line">        cloneTarget[symKey] = <span class="title function_">cloneDeep1</span>(target[symKey]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        cloneTarget[symKey] = target[symKey];</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> i <span class="keyword">in</span> target) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">hasOwnProperty</span>.<span class="title function_">call</span>(target, i)) &#123;</span><br><span class="line">      cloneTarget[i] =</span><br><span class="line">        <span class="keyword">typeof</span> target[i] === <span class="string">&#x27;object&#x27;</span> &amp;&amp; target[i] !== <span class="literal">null</span></span><br><span class="line">        ? <span class="title function_">cloneDeep1</span>(target[i], hash)</span><br><span class="line">        : target[i];</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> cloneTarget;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="20-Promise"><a href="#20-Promise" class="headerlink" title="20.Promise"></a>20.Promise</h2><p>实现思路：<a target="_blank" rel="noopener" href="https://juejin.im/post/6860037916622913550">Promise源码实现</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">PENDING</span> = <span class="string">&#x27;PENDING&#x27;</span>;      <span class="comment">// 进行中</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">FULFILLED</span> = <span class="string">&#x27;FULFILLED&#x27;</span>;  <span class="comment">// 已成功</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">REJECTED</span> = <span class="string">&#x27;REJECTED&#x27;</span>;    <span class="comment">// 已失败</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Promise</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">exector</span>) &#123;</span><br><span class="line">    <span class="comment">// 初始化状态</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">status</span> = <span class="variable constant_">PENDING</span>;</span><br><span class="line">    <span class="comment">// 将成功、失败结果放在this上，便于then、catch访问</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">value</span> = <span class="literal">undefined</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">reason</span> = <span class="literal">undefined</span>;</span><br><span class="line">    <span class="comment">// 成功态回调函数队列</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">onFulfilledCallbacks</span> = [];</span><br><span class="line">    <span class="comment">// 失败态回调函数队列</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">onRejectedCallbacks</span> = [];</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">resolve</span> = value =&gt; &#123;</span><br><span class="line">      <span class="comment">// 只有进行中状态才能更改状态</span></span><br><span class="line">      <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">status</span> === <span class="variable constant_">PENDING</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">status</span> = <span class="variable constant_">FULFILLED</span>;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">value</span> = value;</span><br><span class="line">        <span class="comment">// 成功态函数依次执行</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">onFulfilledCallbacks</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">fn</span> =&gt;</span> <span class="title function_">fn</span>(<span class="variable language_">this</span>.<span class="property">value</span>));</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">reject</span> = reason =&gt; &#123;</span><br><span class="line">      <span class="comment">// 只有进行中状态才能更改状态</span></span><br><span class="line">      <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">status</span> === <span class="variable constant_">PENDING</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">status</span> = <span class="variable constant_">REJECTED</span>;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">reason</span> = reason;</span><br><span class="line">        <span class="comment">// 失败态函数依次执行</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">onRejectedCallbacks</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">fn</span> =&gt;</span> <span class="title function_">fn</span>(<span class="variable language_">this</span>.<span class="property">reason</span>))</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="comment">// 立即执行executor</span></span><br><span class="line">      <span class="comment">// 把内部的resolve和reject传入executor，用户可调用resolve和reject</span></span><br><span class="line">      <span class="title function_">exector</span>(resolve, reject);</span><br><span class="line">    &#125; <span class="keyword">catch</span>(e) &#123;</span><br><span class="line">      <span class="comment">// executor执行出错，将错误内容reject抛出去</span></span><br><span class="line">      <span class="title function_">reject</span>(e);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">then</span>(<span class="params">onFulfilled, onRejected</span>) &#123;</span><br><span class="line">    onFulfilled = <span class="keyword">typeof</span> onFulfilled === <span class="string">&#x27;function&#x27;</span> ? onFulfilled : <span class="function"><span class="params">value</span> =&gt;</span> value;</span><br><span class="line">    onRejected = <span class="keyword">typeof</span> onRejected === <span class="string">&#x27;function&#x27;</span>? <span class="attr">onRejected</span>:</span><br><span class="line">      <span class="function"><span class="params">reason</span> =&gt;</span> &#123; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(reason <span class="keyword">instanceof</span> <span class="title class_">Error</span> ? reason.<span class="property">message</span>:reason) &#125;</span><br><span class="line">    <span class="comment">// 保存this</span></span><br><span class="line">    <span class="keyword">const</span> self = <span class="variable language_">this</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (self.<span class="property">status</span> === <span class="variable constant_">PENDING</span>) &#123;</span><br><span class="line">        self.<span class="property">onFulfilledCallbacks</span>.<span class="title function_">push</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// try捕获错误</span></span><br><span class="line">          <span class="keyword">try</span> &#123;</span><br><span class="line">            <span class="comment">// 模拟微任务</span></span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">              <span class="keyword">const</span> result = <span class="title function_">onFulfilled</span>(self.<span class="property">value</span>);</span><br><span class="line">              <span class="comment">// 分两种情况：</span></span><br><span class="line">              <span class="comment">// 1. 回调函数返回值是Promise，执行then操作</span></span><br><span class="line">              <span class="comment">// 2. 如果不是Promise，调用新Promise的resolve函数</span></span><br><span class="line">              result <span class="keyword">instanceof</span> <span class="title class_">Promise</span> ? result.<span class="title function_">then</span>(resolve, reject) : <span class="title function_">resolve</span>(result);</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125; <span class="keyword">catch</span>(e) &#123;</span><br><span class="line">            <span class="title function_">reject</span>(e);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">        self.<span class="property">onRejectedCallbacks</span>.<span class="title function_">push</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// 以下同理</span></span><br><span class="line">          <span class="keyword">try</span> &#123;</span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">              <span class="keyword">const</span> result = <span class="title function_">onRejected</span>(self.<span class="property">reason</span>);</span><br><span class="line">              <span class="comment">// 不同点：此时是reject</span></span><br><span class="line">              result <span class="keyword">instanceof</span> <span class="title class_">Promise</span> ? result.<span class="title function_">then</span>(resolve, reject) : <span class="title function_">reject</span>(result);</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125; <span class="keyword">catch</span>(e) &#123;</span><br><span class="line">            <span class="title function_">reject</span>(e);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (self.<span class="property">status</span> === <span class="variable constant_">FULFILLED</span>) &#123;</span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">          <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">const</span> result = <span class="title function_">onFulfilled</span>(self.<span class="property">value</span>);</span><br><span class="line">            result <span class="keyword">instanceof</span> <span class="title class_">Promise</span> ? result.<span class="title function_">then</span>(resolve, reject) : <span class="title function_">resolve</span>(result);</span><br><span class="line">          &#125;);</span><br><span class="line">        &#125; <span class="keyword">catch</span>(e) &#123;</span><br><span class="line">          <span class="title function_">reject</span>(e);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (self.<span class="property">status</span> === <span class="variable constant_">REJECTED</span>)&#123;</span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">          <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">const</span> result = <span class="title function_">onRejected</span>(self.<span class="property">reason</span>);</span><br><span class="line">            result <span class="keyword">instanceof</span> <span class="title class_">Promise</span> ? result.<span class="title function_">then</span>(resolve, reject) : <span class="title function_">reject</span>(result);</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125; <span class="keyword">catch</span>(e) &#123;</span><br><span class="line">          <span class="title function_">reject</span>(e);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">catch</span>(onRejected) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">then</span>(<span class="literal">null</span>, onRejected);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">static</span> <span class="title function_">resolve</span>(<span class="params">value</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (value <span class="keyword">instanceof</span> <span class="title class_">Promise</span>) &#123;</span><br><span class="line">      <span class="comment">// 如果是Promise实例，直接返回</span></span><br><span class="line">      <span class="keyword">return</span> value;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// 如果不是Promise实例，返回一个新的Promise对象，状态为FULFILLED</span></span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> <span class="title function_">resolve</span>(value));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">static</span> <span class="title function_">reject</span>(<span class="params">reason</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="title function_">reject</span>(reason);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="21-Promise-all"><a href="#21-Promise-all" class="headerlink" title="21.Promise.all"></a>21.Promise.all</h2><p><code>Promise.all</code>是支持链式调用的，本质上就是返回了一个Promise实例，通过<code>resolve</code>和<code>reject</code>来改变实例状态。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Promise</span>.<span class="property">myAll</span> = <span class="keyword">function</span>(<span class="params">promiseArr</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> ans = [];</span><br><span class="line">    <span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promiseArr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">      promiseArr[i]</span><br><span class="line">      .<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        ans[i] = res;</span><br><span class="line">        index++;</span><br><span class="line">        <span class="keyword">if</span> (index === promiseArr.<span class="property">length</span>) &#123;</span><br><span class="line">          <span class="title function_">resolve</span>(ans);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">      .<span class="title function_">catch</span>(<span class="function"><span class="params">err</span> =&gt;</span> <span class="title function_">reject</span>(err));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="22-Promise-race"><a href="#22-Promise-race" class="headerlink" title="22.Promise.race"></a>22.Promise.race</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Promise</span>.<span class="property">race</span> = <span class="keyword">function</span>(<span class="params">promiseArr</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    promiseArr.<span class="title function_">forEach</span>(<span class="function"><span class="params">p</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 如果不是Promise实例需要转化为Promise实例</span></span><br><span class="line">      <span class="title class_">Promise</span>.<span class="title function_">resolve</span>(p).<span class="title function_">then</span>(</span><br><span class="line">        <span class="function"><span class="params">val</span> =&gt;</span> <span class="title function_">resolve</span>(val),</span><br><span class="line">        <span class="function"><span class="params">err</span> =&gt;</span> <span class="title function_">reject</span>(err),</span><br><span class="line">      )</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="23-Promise并行限制"><a href="#23-Promise并行限制" class="headerlink" title="23.Promise并行限制"></a>23.Promise并行限制</h2><p>就是实现有并行限制的Promise调度器问题。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Scheduler</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">queue</span> = [];</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">maxCount</span> = <span class="number">2</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">runCounts</span> = <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">add</span>(<span class="params">promiseCreator</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">queue</span>.<span class="title function_">push</span>(promiseCreator);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">taskStart</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="variable language_">this</span>.<span class="property">maxCount</span>; i++) &#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="title function_">request</span>();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">request</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!<span class="variable language_">this</span>.<span class="property">queue</span> || !<span class="variable language_">this</span>.<span class="property">queue</span>.<span class="property">length</span> || <span class="variable language_">this</span>.<span class="property">runCounts</span> &gt;= <span class="variable language_">this</span>.<span class="property">maxCount</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">runCounts</span>++;</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">queue</span>.<span class="title function_">shift</span>()().<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">runCounts</span>--;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="title function_">request</span>();</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">   </span><br><span class="line"><span class="keyword">const</span> <span class="title function_">timeout</span> = time =&gt; <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(resolve, time);</span><br><span class="line">&#125;)</span><br><span class="line">  </span><br><span class="line"><span class="keyword">const</span> scheduler = <span class="keyword">new</span> <span class="title class_">Scheduler</span>();</span><br><span class="line">  </span><br><span class="line"><span class="keyword">const</span> <span class="title function_">addTask</span> = (<span class="params">time,order</span>) =&gt; &#123;</span><br><span class="line">  scheduler.<span class="title function_">add</span>(<span class="function">() =&gt;</span> <span class="title function_">timeout</span>(time).<span class="title function_">then</span>(<span class="function">()=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(order)))</span><br><span class="line">&#125;</span><br><span class="line">  </span><br><span class="line">  </span><br><span class="line"><span class="title function_">addTask</span>(<span class="number">1000</span>, <span class="string">&#x27;1&#x27;</span>);</span><br><span class="line"><span class="title function_">addTask</span>(<span class="number">500</span>, <span class="string">&#x27;2&#x27;</span>);</span><br><span class="line"><span class="title function_">addTask</span>(<span class="number">300</span>, <span class="string">&#x27;3&#x27;</span>);</span><br><span class="line"><span class="title function_">addTask</span>(<span class="number">400</span>, <span class="string">&#x27;4&#x27;</span>);</span><br><span class="line">scheduler.<span class="title function_">taskStart</span>()</span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 4</span></span><br></pre></td></tr></table></figure>

<h2 id="24-JSONP"><a href="#24-JSONP" class="headerlink" title="24.JSONP"></a>24.JSONP</h2><p>script标签不遵循同源协议，可以用来进行<strong>跨域请求</strong>，优点就是兼容性好但仅限于GET请求</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">jsonp</span> = (<span class="params">&#123; url, params, callbackName &#125;</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">generateUrl</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> dataSrc = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> params) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">hasOwnProperty</span>.<span class="title function_">call</span>(params, key)) &#123;</span><br><span class="line">        dataSrc += <span class="string">`<span class="subst">$&#123;key&#125;</span>=<span class="subst">$&#123;params[key]&#125;</span>&amp;`</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    dataSrc += <span class="string">`callback=<span class="subst">$&#123;callbackName&#125;</span>`</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;url&#125;</span>?<span class="subst">$&#123;dataSrc&#125;</span>`</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> scriptEle = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;script&#x27;</span>);</span><br><span class="line">    scriptEle.<span class="property">src</span> = <span class="title function_">generateUrl</span>();</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(scriptEle);</span><br><span class="line">    <span class="variable language_">window</span>[callbackName] = <span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="title function_">resolve</span>(data);</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">removeChild</span>(scriptEle);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="25-AJAX"><a href="#25-AJAX" class="headerlink" title="25.AJAX"></a>25.AJAX</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> getJSON = <span class="keyword">function</span>(<span class="params">url</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> xhr = <span class="title class_">XMLHttpRequest</span> ? <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>() : <span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">&#x27;Mscrosoft.XMLHttp&#x27;</span>);</span><br><span class="line">    xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, url, <span class="literal">false</span>);</span><br><span class="line">    xhr.<span class="title function_">setRequestHeader</span>(<span class="string">&#x27;Accept&#x27;</span>, <span class="string">&#x27;application/json&#x27;</span>);</span><br><span class="line">    xhr.<span class="property">onreadystatechange</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (xhr.<span class="property">readyState</span> !== <span class="number">4</span>) <span class="keyword">return</span>;</span><br><span class="line">      <span class="keyword">if</span> (xhr.<span class="property">status</span> === <span class="number">200</span> || xhr.<span class="property">status</span> === <span class="number">304</span>) &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(xhr.<span class="property">responseText</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(xhr.<span class="property">responseText</span>));</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    xhr.<span class="title function_">send</span>();</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="26-event模块"><a href="#26-event模块" class="headerlink" title="26.event模块"></a>26.event模块</h2><p>实现node中回调函数的机制，node中回调函数其实是内部使用了<strong>观察者模式</strong>。</p>
<blockquote>
<p>  观察者模式：定义了对象间一种一对多的依赖关系，当目标对象Subject发生改变时，所有依赖它的对象Observer都会得到通知。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">EventEmitter</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">events</span> = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 需要实现的一些方法：</span></span><br><span class="line"><span class="comment">// addListener、removeListener、once、removeAllListeners、emit</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 模拟实现addlistener方法</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">wrapCallback</span> = (<span class="params">fn, once = <span class="literal">false</span></span>) =&gt; (&#123; <span class="attr">callback</span>: fn, once &#125;);</span><br><span class="line"><span class="title class_">EventEmitter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">addListener</span> = <span class="keyword">function</span>(<span class="params">type, fn, once = <span class="literal">false</span></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> hanlder = <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">get</span>(type);</span><br><span class="line">  <span class="keyword">if</span> (!hanlder) &#123;</span><br><span class="line">    <span class="comment">// 没有type绑定事件</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">set</span>(type, <span class="title function_">wrapCallback</span>(fn, once));</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (hanlder &amp;&amp; <span class="keyword">typeof</span> hanlder.<span class="property">callback</span> === <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="comment">// 目前type事件只有一个回调</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">set</span>(type, [hanlder, <span class="title function_">wrapCallback</span>(fn, once)]);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// 目前type事件数&gt;=2</span></span><br><span class="line">    hanlder.<span class="title function_">push</span>(<span class="title function_">wrapCallback</span>(fn, once));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 模拟实现removeListener</span></span><br><span class="line"><span class="title class_">EventEmitter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">removeListener</span> = <span class="keyword">function</span>(<span class="params">type, listener</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> hanlder = <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">get</span>(type);</span><br><span class="line">  <span class="keyword">if</span> (!hanlder) <span class="keyword">return</span>;</span><br><span class="line">  <span class="keyword">if</span> (!<span class="title class_">Array</span>.<span class="title function_">isArray</span>(<span class="variable language_">this</span>.<span class="property">events</span>)) &#123;</span><br><span class="line">    <span class="keyword">if</span> (hanlder.<span class="property">callback</span> === listener.<span class="property">callback</span>) <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">delete</span>(type);</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; hanlder.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">const</span> item = hanlder[i];</span><br><span class="line">    <span class="keyword">if</span> (item.<span class="property">callback</span> === listener.<span class="property">callback</span>) &#123;</span><br><span class="line">      hanlder.<span class="title function_">splice</span>(i, <span class="number">1</span>);</span><br><span class="line">      i--;</span><br><span class="line">      <span class="keyword">if</span> (hanlder.<span class="property">length</span> === <span class="number">1</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">set</span>(type, hanlder[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 模拟实现once方法</span></span><br><span class="line"><span class="title class_">EventEmitter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">once</span> = <span class="keyword">function</span>(<span class="params">type, listener</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="title function_">addListener</span>(type, listener, <span class="literal">true</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 模拟实现emit方法</span></span><br><span class="line"><span class="title class_">EventEmitter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">emit</span> = <span class="keyword">function</span>(<span class="params">type, ...args</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> hanlder = <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">get</span>(type);</span><br><span class="line">  <span class="keyword">if</span> (!hanlder) <span class="keyword">return</span>;</span><br><span class="line">  <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(hanlder)) &#123;</span><br><span class="line">    hanlder.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">      item.<span class="property">callback</span>.<span class="title function_">apply</span>(<span class="variable language_">this</span>, args);</span><br><span class="line">      <span class="keyword">if</span> (item.<span class="property">once</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">removeListener</span>(type, item);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    hanlder.<span class="property">callback</span>.<span class="title function_">apply</span>(<span class="variable language_">this</span>, args);</span><br><span class="line">    <span class="keyword">if</span> (hanlder.<span class="property">once</span>) &#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">delete</span>(type);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">EventEmitter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">removeAllListeners</span> = <span class="keyword">function</span>(<span class="params">type</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> hanlder = <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">get</span>(type);</span><br><span class="line">  <span class="keyword">if</span> (!hanlder) <span class="keyword">return</span>;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">events</span>.<span class="title function_">delete</span>(type);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="27-图片懒加载"><a href="#27-图片懒加载" class="headerlink" title="27.图片懒加载"></a>27.图片懒加载</h2><p>可以给img标签统一自定义属性<code>data-src=&#39;default.png&#39;</code>，当检测到图片出现在窗口之后再补充<strong>src</strong>属性，此时才会进行图片资源加载。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">lazyload</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> imgs = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&#x27;img&#x27;</span>);</span><br><span class="line">  <span class="keyword">const</span> len = imgs.<span class="property">length</span>;</span><br><span class="line">  <span class="comment">// 视口的高度</span></span><br><span class="line">  <span class="keyword">const</span> viewHeight = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>;</span><br><span class="line">  <span class="comment">// 滚动条高度</span></span><br><span class="line">  <span class="keyword">const</span> scrollHeight = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">const</span> offsetHeight = imgs[i].<span class="property">offsetTop</span>;</span><br><span class="line">    <span class="keyword">if</span> (offsetHeight &lt; viewHeight + scrollHeight) &#123;</span><br><span class="line">      <span class="keyword">const</span> src = imgs[i].<span class="property">dataset</span>.<span class="property">src</span>;</span><br><span class="line">      imgs[i].<span class="property">src</span> = src;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可以使用节流优化一下</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;scroll&#x27;</span>, lazyload);</span><br></pre></td></tr></table></figure>

<h2 id="28-滚动加载"><a href="#28-滚动加载" class="headerlink" title="28.滚动加载"></a>28.滚动加载</h2><p>原理就是监听页面滚动事件，<strong>分析clientHeight</strong>、<strong>scrollTop</strong>、<strong>scrollHeight</strong>三者的属性关系。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;scroll&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> clientHeight = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>;</span><br><span class="line">  <span class="keyword">const</span> scrollTop = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span>;</span><br><span class="line">  <span class="keyword">const</span> scrollHeight = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollHeight</span>;</span><br><span class="line">  <span class="keyword">if</span> (clientHeight + scrollTop &gt;= scrollHeight) &#123;</span><br><span class="line">    <span class="comment">// 检测到滚动至页面底部，进行后续操作</span></span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>

<h2 id="29-渲染几万条数据不卡住页面"><a href="#29-渲染几万条数据不卡住页面" class="headerlink" title="29.渲染几万条数据不卡住页面"></a>29.渲染几万条数据不卡住页面</h2><p>渲染大数据时，合理使用<strong>createDocumentFragment</strong>和<strong>requestAnimationFrame</strong>，将操作切分为一小段一小段执行。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 插入十万条数据</span></span><br><span class="line">  <span class="keyword">const</span> total = <span class="number">100000</span>;</span><br><span class="line">  <span class="comment">// 一次插入的数据</span></span><br><span class="line">  <span class="keyword">const</span> once = <span class="number">20</span>;</span><br><span class="line">  <span class="comment">// 插入数据需要的次数</span></span><br><span class="line">  <span class="keyword">const</span> loopCount = <span class="title class_">Math</span>.<span class="title function_">ceil</span>(total / once);</span><br><span class="line">  <span class="keyword">let</span> countOfRender = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">const</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line">  <span class="comment">// 添加数据的方法</span></span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> fragment = <span class="variable language_">document</span>.<span class="title function_">createDocumentFragment</span>();</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; once; i++) &#123;</span><br><span class="line">      <span class="keyword">const</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line">      li.<span class="property">innerText</span> = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * total);</span><br><span class="line">      fragment.<span class="title function_">appendChild</span>(li);</span><br><span class="line">    &#125;</span><br><span class="line">    ul.<span class="title function_">appendChild</span>(fragment);</span><br><span class="line">    countOfRender += <span class="number">1</span>;</span><br><span class="line">    <span class="title function_">loop</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">loop</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span>(countOfRender &lt; loopCount) &#123;</span><br><span class="line">      <span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(add);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">loop</span>();</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br></pre></td></tr></table></figure>

<h2 id="30-打印出当前网页使用了多少种HTML元素"><a href="#30-打印出当前网页使用了多少种HTML元素" class="headerlink" title="30.打印出当前网页使用了多少种HTML元素"></a>30.打印出当前网页使用了多少种HTML元素</h2><p>一行代码可以解决：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">fn</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> [...<span class="keyword">new</span> <span class="title class_">Set</span>([...<span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;*&#x27;</span>)].<span class="title function_">map</span>(<span class="function"><span class="params">el</span> =&gt;</span> el.<span class="property">tagName</span>))].<span class="property">length</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>值得注意的是：DOM操作返回的是<strong>类数组</strong>，需要转换为数组之后才可以调用数组的方法。</p>
<h2 id="31-将VirtualDom转化为真实DOM结构"><a href="#31-将VirtualDom转化为真实DOM结构" class="headerlink" title="31.将VirtualDom转化为真实DOM结构"></a>31.将VirtualDom转化为真实DOM结构</h2><p>这是当前SPA应用的核心概念之一</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vnode结构：</span></span><br><span class="line"><span class="comment">// &#123;</span></span><br><span class="line"><span class="comment">//   tag,</span></span><br><span class="line"><span class="comment">//   attrs,</span></span><br><span class="line"><span class="comment">//   children,</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//Virtual DOM =&gt; DOM</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">render</span>(<span class="params">vnode, container</span>) &#123;</span><br><span class="line">  container.<span class="title function_">appendChild</span>(<span class="title function_">_render</span>(vnode));</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_render</span>(<span class="params">vnode</span>) &#123;</span><br><span class="line">  <span class="comment">// 如果是数字类型转化为字符串</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> vnode === <span class="string">&#x27;number&#x27;</span>) &#123;</span><br><span class="line">    vnode = <span class="title class_">String</span>(vnode);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 字符串类型直接就是文本节点</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> vnode === <span class="string">&#x27;string&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">document</span>.<span class="title function_">createTextNode</span>(vnode);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 普通DOM</span></span><br><span class="line">  <span class="keyword">const</span> dom = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(vnode.<span class="property">tag</span>);</span><br><span class="line">  <span class="keyword">if</span> (vnode.<span class="property">attrs</span>) &#123;</span><br><span class="line">    <span class="comment">// 遍历属性</span></span><br><span class="line">    <span class="title class_">Object</span>.<span class="title function_">keys</span>(vnode.<span class="property">attrs</span>).<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> value = vnode.<span class="property">attrs</span>[key];</span><br><span class="line">      dom.<span class="title function_">setAttribute</span>(key, value);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 子数组进行递归操作</span></span><br><span class="line">  vnode.<span class="property">children</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">child</span> =&gt;</span> <span class="title function_">render</span>(child, dom));</span><br><span class="line">  <span class="keyword">return</span> dom;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="32-字符串解析问题"><a href="#32-字符串解析问题" class="headerlink" title="32.字符串解析问题"></a>32.字符串解析问题</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    <span class="attr">b</span>: <span class="number">123</span>,</span><br><span class="line">    <span class="attr">c</span>: <span class="string">&#x27;456&#x27;</span>,</span><br><span class="line">    <span class="attr">e</span>: <span class="string">&#x27;789&#x27;</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> str=<span class="string">`a&#123;a.b&#125;aa&#123;a.c&#125;aa &#123;a.d&#125;aaaa`</span>;</span><br><span class="line"><span class="comment">// =&gt; &#x27;a123aa456aa &#123;a.d&#125;aaaa&#x27;</span></span><br></pre></td></tr></table></figure>

<p>实现函数使得将str字符串中的<code>&#123;&#125;</code>内的变量替换，如果属性不存在保持原样（比如<code>&#123;a.d&#125;</code>）</p>
<p>类似于模版字符串，但有一点出入，实际上原理大差不差</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">fn1</span> = (<span class="params">str, obj</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> res = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="comment">// 标志位，标志前面是否有&#123;</span></span><br><span class="line">    <span class="keyword">let</span> flag = <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">let</span> start;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; str.<span class="property">length</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (str[i] === <span class="string">&#x27;&#123;&#x27;</span>) &#123;</span><br><span class="line">            flag = <span class="literal">true</span>;</span><br><span class="line">            start = i + <span class="number">1</span>;</span><br><span class="line">            <span class="keyword">continue</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (!flag) res += str[i];</span><br><span class="line">        <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (str[i] === <span class="string">&#x27;&#125;&#x27;</span>) &#123;</span><br><span class="line">                flag = <span class="literal">false</span>;</span><br><span class="line">                res += <span class="title function_">match</span>(str.<span class="title function_">slice</span>(start, i), obj);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 对象匹配操作</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">match</span> = (<span class="params">str, obj</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> keys = str.<span class="title function_">split</span>(<span class="string">&#x27;.&#x27;</span>).<span class="title function_">slice</span>(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> o = obj;</span><br><span class="line">    <span class="keyword">while</span> (index &lt; keys.<span class="property">length</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> key = keys[index];</span><br><span class="line">        <span class="keyword">if</span> (!o[key]) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">`&#123;<span class="subst">$&#123;str&#125;</span>&#125;`</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            o = o[key];</span><br><span class="line">        &#125;</span><br><span class="line">        index++;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> o;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
    </div>

    
    
    

    <footer class="post-footer">
          

<div class="post-copyright">
<ul>
  <li class="post-copyright-author">
      <strong>本文作者： </strong>Wyatex
  </li>
  <li class="post-copyright-link">
      <strong>本文链接：</strong>
      <a href="https://wyatex.online/%E5%89%8D%E7%AB%AF/32%E4%B8%AA%E6%89%8B%E5%86%99JS%EF%BC%88%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93%EF%BC%89/" title="32个手写JS（知识点总结）">https://wyatex.online/前端/32个手写JS（知识点总结）/</a>
  </li>
  <li class="post-copyright-license">
      <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

          <div class="post-tags">
              <a href="/tags/%E7%AC%94%E8%AE%B0/" rel="tag"># 笔记</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/Vue/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%881%EF%BC%89%EF%BC%9A%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4/" rel="prev" title="Vue学习笔记（1）：基本指令">
                  <i class="fa fa-angle-left"></i> Vue学习笔记（1）：基本指令
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/%E5%BE%AE%E6%9C%BA%E4%B8%8E%E6%8E%A5%E5%8F%A3%E6%8A%80%E6%9C%AF%E7%AC%94%E8%AE%B0%EF%BC%881%EF%BC%89/" rel="next" title="微机与接口技术笔记（1）">
                  微机与接口技术笔记（1） <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 2019 – 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">Wyatex</span>
  </div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script size="300" alpha="0.6" zIndex="-1" src="/lib/ribbon.js/dist/ribbon.min.js"></script>
  <script src="/lib/animejs/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="/lib/@next-theme/pjax/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="/lib/@fancyapps/ui/dist/fancybox/fancybox.umd.js" integrity="sha256-q8XkJ6dj5VwSvzI8+nATCHHQG+Xv/dAZBCgqmu93zOY=" crossorigin="anonymous"></script>
  <script src="/lib/lozad/dist/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="/lib/hexo-generator-searchdb/dist/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>




  <script src="/js/third-party/fancybox.js"></script>



  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
